import { defineStore } from 'pinia';

import appConfigs from '../../app.config';

import { toggleTheme } from '@/utils/index';

type State = {
  loading: boolean,
  collapse: boolean,
  currentDate: number,
  device: string,
  [key: string]: any
}

export const useAppStore = defineStore('_app', {
  state: (): State => ({
    loading: false,
    collapse: false,
    currentDate: new Date().getTime(),
    device: 'desktop',
    ...appConfigs,
  }),
  actions: {
    setLoadingStatus(status: boolean) {
      this.loading = status;
    },
    setDevice(device: string) {
      this.device = device;
    },
    setCollapseStatus(status: boolean) {
      this.collapse = status;
    },
    setCurrentDate(date: number) {
      this.currentDate = date;
    },

    setBreadcrumbStatus(status: boolean) {
      this.useBreadcrumb = status;
    },
    setMultipleNavStatus(status: boolean) {
      this.useMultipleNav = status;
    },
    setHeaderStatus(status: boolean) {
      this.useHeader = status;
    },
    setSidebarStatus(status: boolean) {
      this.useSidebar = status;
    },
    setLayout(layout: string) {
      this.layout = layout;
    },
    setNavbarBackground(color: string) {
      this.navbarBackground = color;
    },
    setSidebarBackground(color: string) {
      this.sidebarBackground = color;
    },
    changeTheme: toggleTheme,
  },
});
